<template>
    <div class="box">
        <el-row>
            <el-col :span="24">
                <div class="header">
                    <el-form ref="form" :model="form" label-width="80px" class="flex-bettom">
                        <div class="flex">
                            <el-form-item label="网点名称">
                                <el-select v-model="form.networkNameId" placeholder="请选择活动区域" style="width:286px">
                                    <el-option v-for="item in networkList" :key="item.id" :label="item.networkName"
                                        :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="一级科目" label-width="120px">
                                <el-select v-model="form.firstId" placeholder="请输入一级科目" style="width:286px">
                                    <el-option v-for="item in SubjectFirstList" :key="item.id" :label="item.firstName"
                                        :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                        <el-form-item>
                            <el-button type="primary" @click="search">查询</el-button>
                            <el-button @click="clear">重置</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-col>
        </el-row>
        <el-row type="flex" justify="end">
            <el-col :span="2">
                <div>
                    <el-button type="primary" @click="onSubmit">自定义二级科目</el-button>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <div>
                    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
                        @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="55">
                        </el-table-column>
                        <el-table-column prop="networkSubjectFirst.firstCode" label="一级科目编码" width="120">
                        </el-table-column>
                        <el-table-column prop="networkSubjectFirst.firstName" label="一级科目" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="secondCode" label="二级科目编码" width="120">
                        </el-table-column>
                        <el-table-column prop="secondName" label="二级科目" width="120">
                        </el-table-column>
                        <el-table-column prop="sysUser.createBy" label="创建人" width="120">
                        </el-table-column>
                        <el-table-column prop="createTime" label="创建时间" width="120">
                        </el-table-column>
                        <el-table-column prop="name" label="操作" width="120">
                        </el-table-column>
                    </el-table>
                </div>
            </el-col>

        </el-row>
        <div class="block" style="display: flex; justify-content: end;">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
            <!-- 弹窗 -->
            <el-dialog title="自定义二级科目" :visible.sync="dialogFormVisible">
                <el-form :model="addForm" :rules="rules" ref="addForm">
                    <el-form-item label="网点名称" label-width="120px" prop="networkNameId">
                        <el-select v-model="addForm.networkNameId" placeholder="请选择活动区域" style="width:286px">
                            <el-option v-for="item in networkList" :key="item.id" :label="item.networkName"
                                :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="一级科目" label-width="120px" prop="firstId">
                        <el-select v-model="addForm.firstId" placeholder="请输入一级科目" style="width:286px">
                            <el-option v-for="item in SubjectFirstList" :key="item.id" :label="item.firstName"
                                :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="二级科目" label-width="120px" prop="secondName">
                        <el-input v-model="addForm.secondName" autocomplete="off" placeholder="请输入二级科目"
                            style="width:286px"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addSub()">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import { getOutletsList, getSubjectFirstList, getSubjectList, subjectSearch, addSubject } from "@/api/dashboard";
export default {
    data() {
        return {
            form: {
                networkNameId: '',
                firstId: '',
            },
            formLabelWidth: '120px',
            addForm: {
                networkNameId: '',
                firstId: '',
                secondName: ''
            },
            // 一级网点
            SubjectFirstList: [],
            //网点列表
            networkList: [],
            pages: {
                pageNum: 1,
                pageSize: 10,
            },
            total: 0,
            dialogFormVisible: false,
            currentPage4: 4,
            tableData: [],
            rules: {
                networkNameId: [
            { required: true, message: '请选择网点名称', trigger: 'blur' },
          ],
          firstId: [
            { required: true, message: '请选择一级科目', trigger: 'blur' },
          ],
          secondName: [
            { required: true, message: '请选择二级科目', trigger: 'blur' },
          ],
        }

        };
    },
    created() {
        this.getList()
        this.getOutLet()
        this.getSubjectFirst()
    },
    methods: {
        // 获取网点列表
        getOutLet() {
            getOutletsList().then((res) => {
                if (res.code == 200) {
                    this.networkList = res.data
                }

            })
        },
        // 获取一级网点下拉框
        getSubjectFirst() {
            getSubjectFirstList().then((res) => {
                if (res.code == 200) {
                    this.SubjectFirstList = res.data
                }

            })
        },
        // 显示表格数据
        getList() {
            getSubjectList().then((res) => {
                if (res.code == 200) {
                    this.tableData = res.data.data
                    this.total = res.data.total
                    this.pages = res.data.pages
                } else {
                    this.$message({
                        message: res.msg,
                        type: 'warning'
                    });
                }

            })
        },
        // 打开弹窗
        onSubmit() {
            this.dialogFormVisible = true

        },
        // 添加自定义二级科目
        addSub() {
        this.$refs.addForm.validate((valid) => {
          if (valid) {
            addSubject(this.addForm).then((res) => {
                if (res.code == 200) {
                    this.$message({
                        message: res.data,
                        type: 'success'
                    });
                    this.dialogFormVisible = false
                } else {
                    this.$message({
                        message: res.msg,
                        type: 'warning'
                    });
                }

            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
        },
        // 查询
        search() {
            subjectSearch(this.form).then((res) => {
                if (res.code == 200) {
                    this.tableData = res.data
                    this.total = res.data.total
                    this.pages = res.data.pages
                } else {
                    this.$message({
                        message: res.msg,
                        type: 'warning'
                    });
                }

            })
        },

        // 重置
        clear() {
            this.form = {}
            this.getList()

        },
        handleSizeChange(val) {
            this.pages.pageSize = val
            this.getList()

            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.pages.pageNum = val
            this.getList()
            console.log(`当前页: ${val}`);
        },
        handleSelectionChange(val) {
        // this.multipleSelection = val;
      }

    },

}
</script>

<style lang="scss" scoped>
.box {
    padding: 20px;
}

.flex {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}

.flex-bettom {
    display: flex;
    justify-content: space-between;
}

.header {
    padding-bottom: 20px;
    border-bottom: 1px solid #ccc;
}

.el-row {
    margin-bottom: 20px;

    &:last-child {
        margin-bottom: 0;
    }
}

.el-col {
    border-radius: 4px;
}

.bg-purple-dark {
    background: #99a9bf;
}

.bg-purple {
    background: #d3dce6;
}

.bg-purple-light {
    background: #e5e9f2;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}
</style>